import { Directive, ElementRef, Input, OnInit, Output, EventEmitter } from '@angular/core';
declare var $: any;

@Directive({ selector: '[zeditor]' })
export class ZeditorDirective implements OnInit {
  @Output() onGetJSON = new EventEmitter();
  @Input('zeditor') toolHeightScale: number;
  @Input('supportImg') upLoadURL: string = '';
  @Input('initdata') initData: any;
  constructor(private el: ElementRef) { }
  ngOnInit() {
    let _this = this;
    let box = this.el.nativeElement;
    let editor = box.querySelector('.editor');
    let selectBtn = this.upLoadURL ? ['paragraph', 'title', 'link', 'image', 'center', 'importantParagraph', 'fullScreen','clearAll']
                                   : ['paragraph', 'title', 'link', 'center', 'importantParagraph','fullScreen', 'clearAll'];
    let zeditor = $(editor).zeditor({
      'selectBtn': selectBtn,
      'upLoadURL': _this.upLoadURL,
      'toolHeightScale': _this.toolHeightScale || 0.12, // 工具条比例，默认0.18
      'setData': _this.initData ? JSON.parse(_this.initData) : {}
    });
    let btn = box.querySelector('.zeditor-submit-btn');
    // btn.onclick = function() {
    //   _this.onGetJSON.emit(zeditor.getJSON());
    // }
    $('.zeditor-submit-btn').click(function(){
      _this.onGetJSON.emit(zeditor.getJSON());
    })
  }
}
